﻿@{
    ViewBag.Title = "云清 - 博客";
    Layout = "~/Views/Shared/LayoutIndex.cshtml";
    var list1 = ViewBag.list1;
}

<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <!--左侧 容器-->
        <div class="col-content">
            <div class="inner">
                <article class="article-list bloglist" id="LAY_bloglist"></article>
            </div>
        </div>
        <!--右侧 容器-->
        <div class="col-other">
            <div class="inner">
                <div class="other-item" id="categoryandsearch">
                    <div class="search">
                        <label class="search-wrap">
                            <input type="text" id="searchtxt" placeholder="输入关键字搜索" />
                            <span class="search-icon">
                                <i class="fa fa-search"></i>
                            </span>
                        </label>
                        <ul class="search-result"></ul>
                    </div>
                    <ul class="category mt20" id="category">
                        <li data-index="0" class="slider"></li>
                        @foreach (var item in list1)
                        {
                            int i = list1.IndexOf(item) + 1;
                            <li data-index="@i"><a href="/Blog/Article">@item.CatalogName</a></li>
                        }
                    </ul>
                </div>
                <!--右边悬浮 平板或手机设备显示-->
                <div class="category-toggle"><i class="layui-icon">&#xe603;</i></div>
                <div class="article-category">
                    <div class="article-category-title">分类导航</div>
                    @foreach (var item in list1)
                    {
                        <a href="/Blog/Article/1/">@item.CatalogName</a>
                    }
                    <div class="f-cb"></div>
                </div>
                <!--遮罩-->
                <div class="blog-mask animated layui-hide"></div>
                <div class="other-item">
                    <h5 class="other-item-title">热门文章</h5>
                    <div class="inner">
                        <ul class="hot-list-article">
                            <li> <a href="/Blog/Read/9">SpringBoot 入门爬虫项目实战</a></li>
                            <li> <a href="/Blog/Read/12">SpringBoot 2.x 教你快速入门</a></li>
                            <li> <a href="/Blog/Read/13">java学习路线</a></li>
                            <li> <a href="/Blog/Read/4">基于SpringBoot+JWT+Redis跨域单点登录的实现</a></li>
                            <li> <a href="/Blog/Read/7">SpringBoot 中如何使用SwaggerAPI接口文档？</a></li>
                            <li> <a href="/Blog/Read/11">小白轻松入门Redis</a></li>
                            <li> <a href="/Blog/Read/14">微信一键登录功能的实现</a></li>
                            <li> <a href="/Blog/Read/8">NPOI导入导出Excel</a></li>
                        </ul>
                    </div>
                </div>
                <div class="other-item">
                    <h5 class="other-item-title">置顶推荐</h5>
                    <div class="inner">
                        <ul class="hot-list-article">
                            <li> <a href="/Blog/Read/16">java学习路线</a></li>
                            <li> <a href="/Blog/Read/14">基于SpringBoot+JWT+Redis跨域单点登录的实现</a></li>
                            <li> <a href="/Blog/Read/9">小白轻松入门Redis</a></li>
                        </ul>
                    </div>
                </div>
                <div class="other-item">
                    <h5 class="other-item-title">最近访客</h5>
                    <div class="inner">
                        <dl class="vistor">
                            <dd>
                                <a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/72388EA977643E8F97111222675720B1/100"><cite>Anonymous</cite></a>
                            </dd>
                            <dd>
                                <a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/342F777E313DDF5CCD6E3E707BB0770B/100"><cite>Dekstra</cite></a>
                            </dd>
                            <dd>
                                <a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/EA5D00A72C0C43ECD8FC481BD274DEEC/100"><cite>惜i</cite></a>
                            </dd>
                            <dd>
                                <a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/EF18CEC98150D2442183AA30F05AAD7B/100"><cite>↙Aㄨ计划 ◆莪↘</cite></a>
                            </dd>
                            <dd>
                                <a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/3D8D91AD2BAFD36F5AC494DA51E270E6/100"><cite>.</cite></a>
                            </dd>
                            <dd>
                                <a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/B745A110DAB712A0E6C5D0B633E905D3/100"><cite>Lambert.</cite></a>
                            </dd>
                            <dd>
                                <a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/E9BA3A2499EC068B7917B9EF45C4D13C/100"><cite>64ღ</cite></a>
                            </dd>
                            <dd>
                                <a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/09F92966169272DD7DD9999E709A0204/100"><cite>doBoor</cite></a>
                            </dd>
                            <dd>
                                <a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/59991D53192643A1A651383847332EB6/100"><cite>毛毛小妖</cite></a>
                            </dd>
                            <dd>
                                <a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/FF34F311DDC43E2AF63BE897BCA24F05/100"><cite>NULL</cite></a>
                            </dd>
                            <dd>
                                <a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/59AA25A7627284AE62C8E6EBDC6FE417/100"><cite>吓一跳</cite></a>
                            </dd>
                            <dd>
                                <a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/28B021E0F5AF0A4B9B781A24329FE897/100"><cite>如初</cite></a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="grid-footer">
    <div class="footer-fixed">
        <div class="copyright">
            <div class="info">
                <div class="contact">
                    <a href="javascript:void(0)" class="github" target="_blank"><i class="fa fa-github"></i></a>
                    <a href="https://wpa.qq.com/msgrd?v=3&uin=930054439&site=qq&menu=yes" class="qq" target="_blank" title="930054439"><i class="fa fa-qq"></i></a>
                    <a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=gbiysbG0tbWyuMHw8K-i7uw" class="email" target="_blank" title="930054439@qq.com"><i class="fa fa-envelope"></i></a>
                    <a href="javascript:void(0)" class="weixin"><i class="fa fa-weixin"></i></a>
                </div>
                <p class="mt05">
                    Copyright &copy; 2019-2020 ZQ博客 All Rights Reserved V.3.1.3 Power by ZQ博客
                </p>
            </div>
        </div>
    </div>
</footer>
<script src="~/Content/pagination/script/lib/jquery.min.js"></script>
<script>
    //是否开启滚动监听
    var stop = true;
    //第几页
    var PageNum = 1;
    //每页多少条
    var PageSize = 5;

    $(function () {
        $(window).on("scroll", function () {
            ScrollLoading();
        });
        getData();
    });

    function getData() {
        var html = '';
        var pageData = {
            PageNum: PageNum,
            PageSize: PageSize,
        }
        $.get("/Home/GetDepotList", pageData, function (data) {
            var jsonData = JSON.parse(data);
            if (jsonData != null) {
                stop = true;
                if (jsonData.length == 0) {
                    layer.msg('没有更多数据了', { icon: 5 });
                }
                for (v in jsonData) {
                    html += getHtml(jsonData[v]);
                }
                $('#LAY_bloglist').append(html);
                PageNum++;//加载成功页数加1
            }
            else {
                layer.confirm('数据请求异常，稍后再试', { icon: 2, title: '提示' }, function (index) {
                    layer.close(index);
                });
            }
        });

    }

    function getHtml(data) {
        var Html = "";
        if (data != undefined || data != null) {
            Html += '<section class="article-item zoomIn article">' + '<h5 class="title">' +
                '<span class="fc-blue">【' + data.TypeName + '】</span>'
            + '<a href="javascript:void(0);" onclick="clickText(this)" data-id="' + data.ArticleID + '">' + data.ArticleTitle + '</a>' + '</h5>' +
            '<div class="time"><span class="day">' + data.Day + '</span><span class="month fs-18">' + data.Month +
            '<span class="fs-14">月</span></span>' +
            '<span class="year fs-18 ml10">' + data.Year + '</span></div>'
            + '<div class="content"><a href="javascript:void(0);" class="cover img-light" onclick="clickText(this)" data-id="' +
            data.ArticleID + '"><img src="http://www.lzqcode.com/images/java.jpg"></a>'
            + data.Content + '</div>' +
                '<div class="read-more"><a href="javascript:void(0);" class="fc-black f-fwb" onclick="clickText(this)" data-id="' +
                data.ArticleID + '">继续阅读</a></div>' +
                '<aside class="f-oh footer"><div class="f-fl tags"><span class="fa fa-tags fs-16"></span>' +
                '<a class="tag">' + data.CatalogName + '</a></div>' + '<div class="f-fr">' + '<span class="read"><i class="fa fa-eye fs-16"></i>'
                + '<i class="num">' + data.ViewTimes + '</i>' +
                '</span><span class="ml20"><i class="fa fa-comments fs-16"></i>' + '<a href="javascript:void(0)" class="num fc-grey">'
                + data.Replies + '</a>' + '</span></div></aside></section>;'
        }
        return Html;
    }

    //滚动加载方法
    function ScrollLoading() {
        var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
        if ($(document).height() <= totalheight) {
            if (stop == true) {
                stop = false;
                layer.msg('玩命加载中...', { icon: 6 });
                getData();
            }
        }
    }

    //文章跳转
    function clickText(e) {
        var ids = e.getAttribute("data-id");
        var url = '/Home/ReadInfo';
        let title = "";
        var pageData = {
            ArticleId: ids
        }
        $.get("/Home/GetTitle", pageData, function (data) {
            var jsonData = JSON.parse(data);
            if (jsonData != null)
            {
                title = jsonData.ArticleTitle;
                if (ids != "") {
                    console.log(ids);
                    window.location.href = url += "?Id=" + ids + "&title=" + title;
                }
                else {
                    layer.msg('错误！未获取到文章ID', {
                        time: 20000, //20s后自动关闭
                        btn: ['明白了', '知道了']
                    }); return null;
                }
            } else {
                layer.msg('错误！', {
                    time: 20000, //20s后自动关闭
                    btn: ['明白了', '知道了']
                }); return null;
            }
            
        })
       
    }
</script>
